<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import {} from '@/types/enum'
import GoButton from '@/components/basic/GoButton.vue'
import { FormInstance } from 'element-plus'
import { useTable } from '@/hooks/useTable'
import { queryStore } from '@/api/store'
import { StoreTableCol } from '@/api/store/types/store'
import { getToken } from '@/utils/cache/cookies'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

defineOptions({
  name: 'OperatorsList'
})
const form = reactive({
  storeName: '',
  phone: '',
  name: '',
  status: ''
})
const formRef = ref<FormInstance | null>(null)
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<StoreTableCol>(queryStore, getToken() ?? '', () => form)
onMounted(() => {
  load()
})
const router = useRouter()
const storeAmap = () => {
  router.push({
    name: 'StoreAMap',
    query: {
      pageNum: 1,
      pageSize: pagination.total,
      ...form
    }
  })
}
const showTimeRentConfigure = (row: StoreTableCol) => {
  router.push({
    name: 'TimeRentConfigure',
    query: {
      storeId: row.storeId
    }
  })
}
const showMoreInfo = (row: StoreTableCol) => {
  router.push({
    name: 'OperatorsInfo',
    query: {
      storeId: row.storeId,
      merchantId: row.merchantId
    }
  })
}
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
const reset = () => {
  formRef.value?.resetFields()
}

const changeStoreStatusColor = (storeStatus: string) => {
  switch (storeStatus) {
    case '营业中':
      return 'var(--xy-success-color)'
    case '已打烊':
      return 'var(--xy-warning-color)'
    case '已歇业':
      return 'var(--xy-light-color)'
    default:
      return ''
  }
}
</script>

<template>
  <div class="xy-container">
    <div flex justify-between>
      <el-form :model="form" ref="formRef" inline>
        <el-form-item prop="name" label="门店联系人">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="phone" label="门店电话">
          <el-input v-model="form.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="storeName" label="门店名称">
          <el-input v-model="form.storeName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="status" label="营业状态">
          <el-select v-model="form.status" style="width: 120px">
            <el-option value="" label="不限" />
            <el-option value="1" label="营业中" />
            <el-option value="0" label="已打烊" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFormSearch">查询</el-button>
          <el-button @click="reset" plain>重置</el-button>
        </el-form-item>
      </el-form>
      <go-button icon-name="store" @click="storeAmap">
        <template #text>
          <span>门店地图</span>
        </template>
      </go-button>
    </div>
    <el-table :data="data" v-loading="loading" class="no-border">
      <el-table-column prop="storeName" label="门店名称" min-width="150" align="center" />
      <el-table-column prop="contactPerson" label="门店联系人" min-width="120" align="center" />
      <el-table-column prop="contactPhone" label="门店电话" min-width="120" align="center" />
      <el-table-column prop="franchiser" label="入驻人信息" min-width="200" align="center" />
      <el-table-column prop="cityName" label="加盟地区" align="center" />
      <el-table-column prop="shortBikeCount" label="短租车辆" min-width="130" align="center" />
      <el-table-column label="短租配置" align="center">
        <template #default="scope">
          <el-button type="primary" class="is-show" link @click="showTimeRentConfigure(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="bikeLongTermCount" label="长租车辆" align="center" />
      <el-table-column prop="bikeLongTermProductsCount" label="长租套餐" align="center" />
      <el-table-column prop="boxCount" label="换电柜" align="center" />
      <el-table-column prop="activityCount" label="活动" align="center" />
      <el-table-column prop="createdTime" label="加入时间" min-width="200" align="center">
        <template #default="scope">
          <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="storeStatus"
        label="营业状态"
        min-width="150"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template #default="scope">
          <span
            :style="{
              color: changeStoreStatusColor(scope.row.storeStatus)
            }"
            >{{ scope.row.storeStatus }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="serviceTime" label="营业时间" min-width="200" align="center" />
      <el-table-column label="更多信息" fixed="right" align="center">
        <template #default="scope">
          <el-button type="primary" class="is-show" link @click="showMoreInfo(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
